<template>
    <div class="classify">
        <div class="top">
            <h1> {{$route.meta.title}}</h1>
            <el-button type="primary" @click="add">添加品类</el-button>
        </div>
        <p>当前商品品类id: <span>0</span></p>
        <!-- 表格区域 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="品类ID">
            </el-table-column>
            <el-table-column prop="name" label="品类名称" width="500">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="update(scope.row)">修改名称</el-button>
                    <el-button size="mini" @click="lookChild(scope.row)">查看其子品类</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格区域 -->
        <!-- 分页器 -->
        <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper" :total="data.length">
        </el-pagination>
        <!-- 分页器 -->
    </div>
</template>

<script>
import { getClassifyList, updateClassify } from "@/utils/api";
export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 10,
            total: 0,
            data: [],
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            getClassifyList().then((res) => {
                this.data = res.data.data;
            });
        },
        handleCurrentChange(page) {
            this.pageNum = page;
        },
        update(data) {
            let name = prompt("请输入修改后的数据", data.name);
            if (name != null) {
                updateClassify(data.id, name).then((res) => {
                    if (res.data.status == 0) {
                        alert(res.data.data);
                        this.getData();
                    }
                });
            }
        },
        add() {
            this.$router.push("/classify/index/add");
        },
        lookChild(data) {
            this.$router.push("/classify/index/" + data.id);
        },
    },
    computed: {
        tableData() {
            if (this.data) {
                let arr = this.data.slice(
                    (this.pageNum - 1) * this.pageSize,
                    this.pageNum * this.pageSize
                );
                return arr;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.classify {
    .top {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        align-items: center;
    }
}
h1 {
    font-weight: normal;
}
</style>